<template>
	<view class="count">共计好友：{{list.length}}名</view>

	<view class="user" v-for="item in list">
		<image src="../../static/logo.png" mode="s"></image>
		<view>
			<view class="tit">浩斯蒂芬</view>
			<view>2024.05.30 19:00:33</view>
		</view>
	</view>
	<view class="nothing" v-if="!list.length && show">暂无好友，请邀请~~</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../api/api';
	import { reactive, ref } from 'vue';
	onLoad(() => {
		user_spreads()
	})
	const list = reactive([])
	const show = ref(false)

	function user_spreads() {
		api.user.user_spreads().then(res => {
			Object.assign(list, res.data)
			show.value = true
		})
	}
</script>

<style lang="scss">
	.count {
		padding: 32rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
	}

	.user {
		width: 616rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #ececec;
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #AAAAAA;

		image {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			margin-right: 34rpx;
		}

		.tit {
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
	}

	.code {}

	.nothing {
		text-align: center;
		font-size: 26rpx;
		padding-top: 200rpx;
		color: #959595;
	}
</style>